<template>
  <el-row :gutter="10">
    <el-col>
      <el-card class="layout-query">
        <el-form ref="queryRef" :inline="true" :model="state.queryForm">
          <el-form-item label="" prop="velocity">
            <el-date-picker
                v-model="time"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-value="time"
                :shortcuts="shortcuts"
                @change="getTime" />
          </el-form-item>
          <el-form-item label="选择设备" prop="velocity">
            <el-select
                v-model="state.queryForm.currenWaybill"
                multiple
                clearable
                collapse-tags
                placeholder="Select"
                popper-class="custom-header"
                :max-collapse-tags="1"
                style="width: 240px"
            >
              <template #header>
                <el-checkbox
                    v-model="checkAll"
                    :indeterminate="indeterminate"
                    @change="handleCheckAll"
                >
                  所有设备
                </el-checkbox>
              </template>
              <el-option v-for="item in DeviceList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="最小速度" prop="velocity">-->
<!--            <el-select v-model="state.queryForm.velocity" placeholder="请选择" size="default" style="width: 240px">-->
<!--              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <!--        <el-space>-->
        <!--          <el-button v-auth="`statistics:trip_statistics:download`" plain icon="Download" @click="downloadExcel()"-->
        <!--            >导出</el-button-->
        <!--          >-->
        <!--        </el-space>-->
        <!--        </el-space>-->
        <el-table
            v-loading="state.dataListLoading"
            :data="state.dataList"
            border
            class="layout-table"
            @selection-change="selectionChangeHandle">
          <el-table-column type="index" header-align="center" align="center" width="50" />
          <el-table-column type="expand">
            <template #default>
              <div>
                <el-table>
                  <el-table-column type="index" label="序号" header-align="center" align="center" width="50" />
                  <el-table-column prop="occurTime" label="开始时间" header-align="center" align="center" />
                  <ma-dict-column prop="endTime" label="Acc状态" dict-type="ACC_status"/>
                  <el-table-column prop="endTime" label="时长" header-align="center" align="center" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="selection" header-align="center" align="center" width="50" />
          <el-table-column prop="imei" label="设备名称" header-align="center" align="center" />
          <el-table-column prop="occurNum" label="设备序号" header-align="center" align="center" />
          <el-table-column prop="occurTime" label="所属账号" header-align="center" align="center" />
          <el-table-column prop="occurTime" label="分组名称" header-align="center" align="center" />
          <el-table-column prop="imei" label="点火次数" header-align="center" align="center" />
          <el-table-column prop="occurNum" label="点火时长" header-align="center" align="center" />
        </el-table>
        <el-pagination
            :current-page="state.page"
            :page-sizes="state.pageSizes"
            :page-size="state.limit"
            :total="state.total"
            layout="total, sizes, prev, pager, next"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle">
        </el-pagination>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, watch } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import OrgTree from '@/views/sys/user/org-tree.vue'
import Detail from '@/views/biz/waybill/detail.vue'
import { useRouter } from 'vue-router'
import MaDictColumn from '@/components/ma-dict/ma-dict-column/index.vue'

import { CheckboxValueType, ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import { useDeviceListApi } from '@/api/gps/device'
const queryRef = ref()
const state: IHooksOptions = reactive({
  dataListUrl: '',
  // newParams: true,
  // deleteUrl: '/biz/waybill',
  // responseInterceptor: (data) => {
  //   data?.forEach((value, index) => {
  //     data[index].haveAlarm = value.haveAlarm.toString()
  //   })
  //   return data
  // },
  queryForm: {
    startTime: `${moment().format('YYYY-MM-DD')} 00:00:00`,
    endTime: `${moment().format('YYYY-MM-DD')} 23:59:59`,
    imei: '',
    sysOrgId: '',
    recursion: false,
    velocity: '',
    currenWaybill: []
  }
})
const options = [
  {
    value: '0',
    label: '5 Km/h'
  },
  {
    value: '1',
    label: '10 Km/h'
  },
  {
    value: '2',
    label: '20 Km/h'
  },
  {
    value: '3',
    label: '35 Km/h'
  }
]
const downloadExcel = () => {
  downloadHandle('/biz/car/exportall').then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500
    })
  })
}
// const mineList = ref<any[]>([])
const time = ref([state.queryForm.startTime, state.queryForm.endTime])
const DeviceList = ref([])
const checkAll = ref(false)
const indeterminate = ref(false)
function useDeviceList() {
  useDeviceListApi({
    orderField: 'signal_update_time',
    onlyVideo: false,
    order: 'DESC',
    pageNum: 1,
    pageSize: 1000,
    keyWords: ''
  }).then((res) => {
    DeviceList.value = res.data.list.map((res) => {
      return {
        value: res.imei,
        label: res.imei + '  ' + res.subTitle
      }
    })
  })
}
useDeviceList()

watch(state.queryForm.currenWaybill, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === DeviceList.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    state.queryForm.currenWaybill = DeviceList.value.map((_) => _.value)
  } else {
    state.queryForm.currenWaybill = []
  }
}

function getTime(e) {
  if (e === null) {
    state.queryForm.endTime = ''
    state.queryForm.startTime = ''
  } else {
    if (e[0] === e[1]) {
      state.queryForm.startTime = e[0]
      const a = e[1].split(' ')
      state.queryForm.endTime = a[0] + ' 23:59:59'
      return
    }
    state.queryForm.startTime = e[0]
    state.queryForm.endTime = e[1]
  }
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    }
  }
]
const handleOrgClick = (orgId: any) => {
  state.queryForm.sysOrgId = orgId
  getDataList()
}

const {
  getDataList,
  selectionChangeHandle,
  sizeChangeHandle,
  currentChangeHandle,
  deleteBatchHandle,
  reset,
  downloadHandle
} = useCrud(state)
</script>
<style>
.hide {
  width: 200px;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
